<template>
  <div>
    <el-form ref="formRef" :model="form" label-width="80px" :rules="rules">
      <el-form-item prop="name" :label="type === 'node' ? '节点' : '资源'">
        <el-input v-model="form.name" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item prop="attri" label="属性">
        <el-input v-model="form.attri" placeholder="请输入属性名"></el-input>
      </el-form-item>
      <el-form-item prop="value" label="值">
        <el-input v-model="form.value" placeholder="请输入值"></el-input>
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
    </div>
  </div>
</template>

<script>
import { addOrEditUtilization } from '@/api/advanced'

export default {
  name: 'AddUtilization',
  props: {
    type: {
      type: String,
      default: 'node'
    },
    nodeData: {
      type: Array,
      required: true
    },
    rscData: {
      type: Array,
      required: true
    }
  },
  data() {
    // 属性名验证
    const validateAttri = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入属性名'))
      } else if (value.length < 1 || value.length > 255) {
        callback(new Error('属性名长度为1-255个字符'))
      } else if (!/^[0-9]+[\u4e00-\u9fa5a-zA-Z_.-]+[\u4e00-\u9fa5a-zA-Z_.-]*|[\u4e00-\u9fa5a-zA-Z_.]+[0-9-]*[\u4e00-\u9fa5a-zA-Z_.-]*$/.test(value)) {
        callback(new Error('只能输入中文、英文、数字和括号中的特殊字符(-_.),且数字不可单独使用，短横线不可开头'))
      } else {
        callback()
      }
    }

    // 值验证
    const validateValue = (rule, value, callback) => {
      if (!value && value !== '0') {
        callback(new Error('请输入值'))
      } else if (!/^([1-9]\d*|[0]{1,1})$/.test(value)) {
        callback(new Error('输入大于等于0的整数'))
      } else {
        callback()
      }
    }

    return {
      form: {
        name: '',
        attri: '',
        value: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        attri: [
          { required: true, validator: validateAttri, trigger: 'blur' }
        ],
        value: [
          { required: true, validator: validateValue, trigger: 'blur' }
        ]
      },
      loading: false
    }
  },
  methods: {
    // 提交
    handleSubmit() {
      const self = this
      this.$refs.formRef.validate(function(valid) {
        if (valid) {
          // 检查是否重复
          const data = self.type === 'node' ? self.nodeData : self.rscData
          const isDuplicate = data.some(function(item) {
            return item.name === self.form.name && item.attri === self.form.attri
          })

          if (isDuplicate) {
            self.$message.error('添加的属性名已经存在！')
            return
          }

          self.loading = true
          const submitData = {
            name: self.form.name,
            type: self.type
          }
          submitData[self.form.attri] = self.form.value

          addOrEditUtilization(submitData).then(function(res) {
            self.loading = false
            if (res.data.action) {
              self.$message.success(res.data.info || '添加成功')
              self.$emit('success')
            } else {
              self.$message.error(res.data.error || '添加失败')
            }
          }).catch(function() {
            self.loading = false
            self.$message.error('添加失败')
          })
        }
      })
    },
    // 取消
    handleCancel() {
      this.$refs.formRef.resetFields()
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
